<?php

/*--------------------------------------------------------------------------/
* @Author		KulerThemes.com http://www.kulerthemes.com
* @Copyright	Copyright (C) 2012 - 2013 KulerThemes.com. All rights reserved.
* @License		KulerThemes.com Proprietary License
/---------------------------------------------------------------------------*/

?>

<?php echo $header; ?>
<?php if (isset($ksb_building_mode)) { ?>
    <style type="text/css">
        #header, .breadcrumb, .box > .heading .buttons,.vtabs, #footer {
            display: none !important;
        }

        #content {
            padding: 0 !important;
        }

        .box > .content {
            background: none !important;
        }

        .vtabs-content {
            padding-left: 15px !important;
        }
    </style>
<?php } ?>
    <script type="text/javascript">
        <?php if (isset($ksb_updated_module)) { ?>
        var ksb_updated_module = <?php echo $ksb_updated_module; ?>;
        <?php } ?>
    </script>
    <div id="content" class="kuler-module">
        <div class="breadcrumb">
            <?php foreach ($breadcrumbs as $breadcrumb) { ?>
                <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
            <?php } ?>
        </div>
        <?php if ($error_warning) { ?>
            <div class="warning"><?php echo $error_warning; ?></div>
        <?php } ?>
        <div class="box">
            <div class="heading clearafter">
                <h1><img src="./view/kulercore/images/logos/kuler_advanced_html.png" alt="<?php echo $heading_title; ?>" /></h1>
                <div class="buttons">
                    <a onclick="$('#form').submit();" class="button save-settings"><?php echo $button_save; ?></a>
                    <a onclick="$('#op').val('close'); $('#form').submit();" class="button cancel-settings"><?php echo $button_close; ?></a>
                    <a href="<?php echo $cancel; ?>" class="button cancel-settings"><?php echo $button_cancel; ?></a>
                </div>
            </div>
            <div class="content">
                <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
                    <input type="hidden" name="vtab" id="vtab" value="<?php echo $vtab ?>" />
                    <input type="hidden" name="htab" id="htab" value="<?php echo $htab ?>" />
                    <input type="hidden" name="op" id="op" />

                    <div style="margin: 20px 0 0 30px;">
                        <label><?php echo $__['entry_store']; ?></label>
                        <select name="store_id" id="StoreSelector">
                            <?php foreach ($stores as $store_id => $store_name) { ?>
                                <option value="<?php echo $store_id; ?>"<?php if ($store_id == $selected_store_id) echo ' selected="selected"'; ?>><?php echo $store_name; ?></option>
                            <?php } ?>
                        </select>
                    </div>

                    <ul class="vtabs">
                        <?php $module_row = 1; ?>
                        <?php foreach ($modules as $module) { ?>
                            <li>
                                <a href="#tab-module-<?php echo $module_row; ?>" id="module-<?php echo $module_row; ?>">
                                    <?php echo $module['main_title']; ?>
                                    <img class="remove-element" src="view/kulercore/images/icons/icon-delete.png" alt="" onclick="$('#module-<?php echo $module_row; ?>').remove(); $('#tab-module-<?php echo $module_row; ?>').remove(); $('.vtabs a:first').trigger('click'); return false;" />
                                </a>
                            </li>
                            <?php $module_row++; ?>
                        <?php } ?>
                        <li><span id="module-add" class="module-add"><?php echo $button_add_module; ?>&nbsp;<img class="add-element" src="view/kulercore/images/icons/icon-add.png" alt="" onclick="addModule();" /></span></li>
                    </ul>
                    <?php $module_row = 1; ?>
                    <?php foreach ($modules as $module) { ?>
                        <div id="tab-module-<?php echo $module_row; ?>" class="vtabs-content">
                            <table class="form">
                                <tr>
                                    <td><?php echo $entry_status; ?></td>
                                    <td width="10">
                                        <div class="kuler-switch-btn">
                                            <input type='hidden' name='kuler_advanced_html_module[<?php echo $module_row; ?>][status]' value='0' />
                                            <input type="checkbox" name="kuler_advanced_html_module[<?php echo $module_row; ?>][status]"<?php echo $module['status'] ? ' checked="checked"' : '' ?>  value="1">
                                            <span class="kuler-switch-btn-holder"></span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><?php echo $entry_showtitle; ?></td>
                                    <td width="10">
                                        <div class="kuler-switch-btn">
                                            <input type='hidden' name='kuler_advanced_html_module[<?php echo $module_row; ?>][showtitle]' value='0' />
                                            <input type="checkbox" name="kuler_advanced_html_module[<?php echo $module_row; ?>][showtitle]"<?php echo $module['showtitle'] ? ' checked="checked"' : '' ?>  value="1">
                                            <span class="kuler-switch-btn-holder"></span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><?php echo $entry_title; ?></td>
                                    <td>
                                        <?php foreach ($languages as $language) { ?>
                                            <p>
                                                <input type="text" name="kuler_advanced_html_module[<?php echo $module_row; ?>][title][<?php echo $language['language_id']; ?>]" value="<?php echo $module['title'][$language['language_id']]; ?>" />
                                                <img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" />
                                            </p>
                                        <?php } ?>
                                    </td>
                                </tr>
                                <tr>
                                    <td><?php echo $__['entry_module_type']; ?></td>
                                    <td>
                                        <select name="kuler_advanced_html_module[<?php echo $module_row; ?>][module_type]" class="Selector ModuleTypeSelector" data-widget-type-selector="#WidgetTypeSelector_<?php echo $module_row; ?>" data-editor-panel="#EditorPanel_<?php echo $module_row; ?>" data-product-panel="#ProductPanel_<?php echo $module_row; ?>" data-related-standard=".StandardRelatedRow_<?php echo $module_row; ?>" data-related-widget=".WidgetRelatedRow_<?php echo $module_row; ?>" style="width: 150px;">
                                            <option value="standard"<?php if (isset($module['module_type']) && $module['module_type'] == 'standard') echo ' selected="selected"'; ?>><?php echo $__['text_standard']; ?></option>
                                            <option value="widget"<?php if (isset($module['module_type']) && $module['module_type'] == 'widget') echo ' selected="selected"'; ?>><?php echo $__['text_widget']; ?></option>
                                        </select>
                                    </td>
                                </tr>
                                <tr class="WidgetRelatedRow_<?php echo $module_row; ?>">
                                    <td><?php echo $__['entry_widget_position']; ?></td>
                                    <td>
                                        <select name="kuler_advanced_html_module[<?php echo $module_row; ?>][widget_position]" style="width: 150px;">
                                            <option value="left"<?php if (isset($module['widget_position']) && $module['widget_position'] == 'left') echo ' selected="selected"'; ?>><?php echo $__['text_left']; ?></option>
                                            <option value="right"<?php if (isset($module['widget_position']) && $module['widget_position'] == 'right') echo ' selected="selected"'; ?>><?php echo $__['text_right']; ?></option>
                                        </select>
                                    </td>
                                </tr>
                                <tr class="WidgetRelatedRow_<?php echo $module_row; ?>">
                                    <td><?php echo $__['entry_widget_type']; ?></td>
                                    <td>
                                        <select name="kuler_advanced_html_module[<?php echo $module_row; ?>][widget_type]" id="WidgetTypeSelector_<?php echo $module_row; ?>" class="Selector" data-related-html=".HtmlRelatedRow_<?php echo $module_row ?>" data-related-product=".ProductRelatedRow_<?php echo $module_row ?>" style="width: 150px;">
                                            <option value="html"<?php if (!isset($module['widget_type']) || $module['widget_type'] == 'html') echo ' selected="selected"'; ?>><?php echo $__['text_html']; ?></option>
                                            <option value="product"<?php if (isset($module['widget_type']) && $module['widget_type'] == 'product') echo ' selected="selected"'; ?>><?php echo $__['text_product']; ?></option>
                                        </select>
                                    </td>
                                </tr>
                                <tr class="WidgetRelatedRow_<?php echo $module_row; ?>">
                                    <td><?php echo $__['entry_widget_icon']; ?></td>
                                    <td>
                                        <div id="WidgetIconContainer_<?php echo $module_row; ?>" style="float: left; margin-right: 20px;">
                                            <?php if (isset($module['widget_icon']) && $module['widget_icon']) { ?>
                                                <img src="<?php echo $module['widget_icon_thumb']; ?>" />
                                            <?php } ?>
                                        </div>

                                        <input type="hidden" id="WidgetIcon_<?php echo $module_row; ?>" name="kuler_advanced_html_module[<?php echo $module_row; ?>][widget_icon]" value="<?php if (isset($module['widget_icon'])) echo $module['widget_icon']; ?>" />
                                        <a href="#" class="ImageManager button" data-clear="#WidgetIconImageManagerClear_<?php echo $module_row; ?>" data-field="WidgetIcon_<?php echo $module_row; ?>" data-image="#WidgetIconContainer_<?php echo $module_row; ?>"><?php echo $__['button_choose_image']; ?></a> &nbsp;
                                        <a href="#" class="button" id="WidgetIconImageManagerClear_<?php echo $module_row; ?>"><?php echo $__['button_clear']; ?></a>
                                    </td>
                                </tr>
                                <tr class="WidgetRelatedRow_<?php echo $module_row; ?>">
                                    <td><?php echo $__['entry_widget_icon_color']; ?></td>
                                    <td>
                                        <div class="color-picker-container">
                                            <div class="color-picker ColorPicker" data-background-color="#widget_icon_color_<?php echo $module_row; ?>" data-default-color="<?php if (isset($module['widget_icon_color'])) echo $module['widget_icon_color']; ?>">
                                                <div<?php if (isset($module['widget_icon_color'])) echo ' style="background-color: ' . $module['widget_icon_color'] . ';"'; ?>></div>
                                            </div>
                                            <input type="text" id="widget_icon_color_<?php echo $module_row; ?>" name="kuler_advanced_html_module[<?php echo $module_row; ?>][widget_icon_color]" value="<?php if (isset($module['widget_icon_color'])) echo $module['widget_icon_color']; ?>" size="7" />
                                        </div>
                                    </td>
                                </tr>
                                <tr class="StandardRelatedRow_<?php echo $module_row; ?>">
                                    <td><?php echo $entry_layout; ?></td>
                                    <td><select name="kuler_advanced_html_module[<?php echo $module_row; ?>][layout_id]" style="width: 150px;">
                                            <?php foreach ($layouts as $layout) { ?>
                                                <?php if ($layout['layout_id'] == $module['layout_id']) { ?>
                                                    <option value="<?php echo $layout['layout_id']; ?>" selected="selected"><?php echo $layout['name']; ?></option>
                                                <?php } else { ?>
                                                    <option value="<?php echo $layout['layout_id']; ?>"><?php echo $layout['name']; ?></option>
                                                <?php } ?>
                                            <?php } ?>
                                        </select></td>
                                </tr>
                                <tr class="StandardRelatedRow_<?php echo $module_row; ?>">
                                    <td><?php echo $entry_position; ?></td>
                                    <td><select name="kuler_advanced_html_module[<?php echo $module_row; ?>][position]" style="width: 150px;">
                                            <?php if ($module['position'] == 'content_top') { ?>
                                                <option value="content_top" selected="selected"><?php echo $text_content_top; ?></option>
                                            <?php } else { ?>
                                                <option value="content_top"><?php echo $text_content_top; ?></option>
                                            <?php } ?>
                                            <?php if ($module['position'] == 'content_bottom') { ?>
                                                <option value="content_bottom" selected="selected"><?php echo $text_content_bottom; ?></option>
                                            <?php } else { ?>
                                                <option value="content_bottom"><?php echo $text_content_bottom; ?></option>
                                            <?php } ?>
                                            <?php if ($module['position'] == 'column_left') { ?>
                                                <option value="column_left" selected="selected"><?php echo $text_column_left; ?></option>
                                            <?php } else { ?>
                                                <option value="column_left"><?php echo $text_column_left; ?></option>
                                            <?php } ?>
                                            <?php if ($module['position'] == 'column_right') { ?>
                                                <option value="column_right" selected="selected"><?php echo $text_column_right; ?></option>
                                            <?php } else { ?>
                                                <option value="column_right"><?php echo $text_column_right; ?></option>
                                            <?php } ?>
                                        </select></td>
                                </tr>
                                <tr class="StandardRelatedRow_<?php echo $module_row; ?>">
                                    <td><?php echo $entry_sort_order; ?></td>
                                    <td><input type="text" name="kuler_advanced_html_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $module['sort_order']; ?>" size="3" /></td>
                                </tr>
                            </table>

                            <div class="HtmlRelatedRow_<?php echo $module_row; ?>" id="EditorPanel_<?php echo $module_row; ?>">
                                <div id="language-<?php echo $module_row; ?>" class="htabs">
                                    <?php foreach ($languages as $language) { ?>
                                        <a href="#tab-language-<?php echo $module_row; ?>-<?php echo $language['language_id']; ?>"><img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /> <?php echo $language['name']; ?></a>
                                    <?php } ?>
                                </div>

                                <?php foreach ($languages as $language) { ?>
                                    <div id="tab-language-<?php echo $module_row; ?>-<?php echo $language['language_id']; ?>">
                                        <table class="form">
                                            <tr>
                                                <td><?php echo $entry_description; ?></td>
                                                <td><textarea name="kuler_advanced_html_module[<?php echo $module_row; ?>][description][<?php echo $language['language_id']; ?>]" id="description-<?php echo $module_row; ?>-<?php echo $language['language_id']; ?>"><?php echo isset($module['description'][$language['language_id']]) ? $module['description'][$language['language_id']] : ''; ?></textarea></td>
                                            </tr>
                                        </table>
                                    </div>
                                <?php } ?>
                            </div>

                            <div class="ProductRelatedRow_<?php echo $module_row; ?>" id="ProductPanel_<?php echo $module_row ?>">
                                <table class="form">
                                    <tr>
                                        <td><?php echo $__['entry_product']; ?></td>
                                        <td><input type="text" class="ProductAutocomplete" data-list="#ProductAutocompleteList_<?php echo $module_row; ?>" data-products="#WidgetProducts_<?php echo $module_row; ?>" /></td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td>
                                            <div id="ProductAutocompleteList_<?php echo $module_row; ?>" class="scrollbox" data-item-prefix="ProductAutocompleteItem_<?php echo $module_row; ?>_">
                                            </div>
                                            <input type="hidden" name="kuler_advanced_html_module[<?php echo $module_row; ?>][product]" id="WidgetProducts_<?php echo $module_row; ?>" value="<?php echo $module['product']; ?>" />
                                        </td>
                                    </tr>

                                    <tr>
                                        <td><?php echo $__['entry_product_name']; ?></td>
                                        <td width="10">
                                            <div class="kuler-switch-btn">
                                                <input type='hidden' name='kuler_advanced_html_module[<?php echo $module_row; ?>][name]' value='0' />
                                                <input type="checkbox" name="kuler_advanced_html_module[<?php echo $module_row; ?>][name]"<?php echo $module['name'] ? ' checked="checked"' : '' ?>  value="1">
                                                <span class="kuler-switch-btn-holder"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><?php echo $__['entry_product_price']; ?></td>
                                        <td width="10">
                                            <div class="kuler-switch-btn">
                                                <input type='hidden' name='kuler_advanced_html_module[<?php echo $module_row; ?>][price]' value='0' />
                                                <input type="checkbox" name="kuler_advanced_html_module[<?php echo $module_row; ?>][price]"<?php echo $module['price'] ? ' checked="checked"' : '' ?>  value="1">
                                                <span class="kuler-switch-btn-holder"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><?php echo $__['entry_product_rating']; ?></td>
                                        <td width="10">
                                            <div class="kuler-switch-btn">
                                                <input type='hidden' name='kuler_advanced_html_module[<?php echo $module_row; ?>][rating]' value='0' />
                                                <input type="checkbox" name="kuler_advanced_html_module[<?php echo $module_row; ?>][rating]"<?php echo $module['rating'] ? ' checked="checked"' : '' ?>  value="1">
                                                <span class="kuler-switch-btn-holder"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><?php echo $__['entry_product_description']; ?></td>
                                        <td width="10">
                                            <div class="kuler-switch-btn">
                                                <input type='hidden' name='kuler_advanced_html_module[<?php echo $module_row; ?>][product_description]' value='0' />
                                                <input type="checkbox" name="kuler_advanced_html_module[<?php echo $module_row; ?>][product_description]"<?php echo $module['product_description'] ? ' checked="checked"' : '' ?>  value="1" />
                                                <span class="kuler-switch-btn-holder"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><?php echo $__['entry_product_add_to_cart']; ?></td>
                                        <td width="10">
                                            <div class="kuler-switch-btn">
                                                <input type='hidden' name='kuler_advanced_html_module[<?php echo $module_row; ?>][add]' value='0' />
                                                <input type="checkbox" name="kuler_advanced_html_module[<?php echo $module_row; ?>][add]"<?php echo $module['add'] ? ' checked="checked"' : '' ?>  value="1">
                                                <span class="kuler-switch-btn-holder"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><?php echo $__['entry_product_wish_list']; ?></td>
                                        <td width="10">
                                            <div class="kuler-switch-btn">
                                                <input type='hidden' name='kuler_advanced_html_module[<?php echo $module_row; ?>][wishlist]' value='0' />
                                                <input type="checkbox" name="kuler_advanced_html_module[<?php echo $module_row; ?>][wishlist]"<?php echo $module['wishlist'] ? ' checked="checked"' : '' ?>  value="1">
                                                <span class="kuler-switch-btn-holder"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><?php echo $__['entry_product_compare']; ?></td>
                                        <td width="10">
                                            <div class="kuler-switch-btn">
                                                <input type='hidden' name='kuler_advanced_html_module[<?php echo $module_row; ?>][compare]' value='0' />
                                                <input type="checkbox" name="kuler_advanced_html_module[<?php echo $module_row; ?>][compare]"<?php echo $module['compare'] ? ' checked="checked"' : '' ?>  value="1">
                                                <span class="kuler-switch-btn-holder"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><?php echo $__['entry_product_dimension']; ?></td>
                                        <td><input type="text" name="kuler_advanced_html_module[<?php echo $module_row; ?>][image_width]" value="<?php echo $module['image_width']; ?>" size="5" placeholder="width" />
                                            <input type="text" name="kuler_advanced_html_module[<?php echo $module_row; ?>][image_height]" value="<?php echo $module['image_height']; ?>" size="5" placeholder="height" />
                                            <?php if (isset($error_dimension[$module_row])) { ?>
                                                <span class="error"><?php echo $error_dimension[$module_row]; ?></span>
                                            <?php } ?></td>
                                    </tr>
                                    <tr>
                                        <td><?php echo $__['entry_description_text']; ?>
                                        </td>
                                        <td>
                                            <input type="text" name="kuler_advanced_html_module[<?php echo $module_row; ?>][description_text]" size="5" value="<?php if (isset($module['description_text'])) echo $module['description_text']; ?>" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <?php $module_row++; ?>
                    <?php } ?>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="view/javascript/ckeditor/ckeditor.js"></script>
    <script type="text/javascript"><!--
        <?php $module_row = 1; ?>
        <?php foreach ($modules as $module) { ?>
        <?php foreach ($languages as $language) { ?>
        CKEDITOR.replace('description-<?php echo $module_row; ?>-<?php echo $language['language_id']; ?>', {
            filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserImageBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserFlashBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserImageUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserFlashUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>'
        });
        <?php } ?>
        <?php $module_row++; ?>
        <?php } ?>
        //--></script>
    <script type="text/javascript"><!--
    var saveUrl = '<?php echo $action; ?>';
    saveUrl = saveUrl.replace(new RegExp('&amp;', 'g'), '&');
    $('#StoreSelector').on('change', function () {
        window.location = saveUrl + '&store_id=' + $(this).val();
    });

    var StoreId = <?php echo $selected_store_id; ?>;

    var g_token = '<?php echo $token; ?>';

    var Selector = (function ($) {
        return {
            init: function (selector) {
                $('body').on('change', selector, function () {
                    var $selector = $(this),
                        data = $selector.data(),
                        values = $.map($selector.find('option'), function (option) {
                            return option.value;
                        });

                    $.each(values, function (index, value) {
                        var prop = $.camelCase('related-' + value);

                        if (prop in data) {
                            if (value == $selector.val()) {
                                $(data[prop]).show();
                            } else {
                                $(data[prop]).hide();
                            }
                        }
                    });
                });

                $(selector).trigger('change');
            }
        };
    })(jQuery);

    Selector.init('.Selector');

    var ProductAutocomplete = (function () {
        var that;

        return {
            init: function (selector, context) {
                that = this;
                var $selector = $(selector, context || document);

                $selector.each(function () {
                    var $products = $($(this).data('products')),
                        $list = $($(this).data('list'));

                    that.renderItems($list, $products, that.fetchItems($products[0]));
                });

                $selector.autocomplete({
                    delay: 200,
                    source: function(request, response) {
                        $.ajax({
                            url: 'index.php?route=module/kuler_advanced_html/autocomplete&token='+ g_token +'&filter_name=' +  encodeURIComponent(request.term) + '&store_id=' + StoreId,
                            dataType: 'json',
                            success: function(json) {
                                response($.map(json, function(item) {
                                    return {
                                        label: item.name,
                                        value: item.product_id
                                    }
                                }));
                            }
                        });
                    },
                    select: function(event, ui) {
                        var $this = $(this),
                            $list = $($this.data('list')),
                            $products = $($this.data('products')),
                            products = that.fetchItems($products[0]);

                        for (var i = 0; i < products; i++) {
                            if (ui.item.value == products[i].id) {
                                return false;
                            }
                        }

                        products.push({
                            id: ui.item.value,
                            title: ui.item.label
                        });
                        that.renderItems($list, $products, products);

                        $products.val(JSON.stringify(products));

	                    $selector.val('');

                        return false;
                    },
                    focus: function(event, ui) {
                        return false;
                    }
                });
            },
            fetchItems: function(el) {
                return el.value ? JSON.parse(el.value) : [];
            },
            renderItems: function($list, $products, products) {
                var itemPrefix = $list.data('item-prefix'),
                    i = 0,
                    itemHtml = '';

                $list.empty();

                for (; i < products.length; i++) {
                    itemHtml += '<div id="'+ itemPrefix + products[i].id + '" class="'+ (i % 2 ? 'odd' :'even') +'">'+ products[i].title +'<img src="view/kulercore/images/icons/icon-delete.png" data-product-id="'+ products[i].id +'"/></div>';
                }

                $list.append(itemHtml);

                $list.find('img').on('click', function () {
                    var $remover = $(this),
                        oldProducts = that.fetchItems($products[0]),
                        newProducts = [];

                    for (var i = 0; i < oldProducts.length; i++) {
                        if ($remover.data('productId') != oldProducts[i].id) {
                            newProducts.push(oldProducts[i]);
                        }
                    }

                    that.renderItems($list, $products, newProducts);

                    $products.val(JSON.stringify(newProducts));
                });
            }
        };
    })();

    ProductAutocomplete.init('.ProductAutocomplete');

    var ModuleTypeSelector = (function () {
        return {
            init: function (selector, context) {
                $(selector, context || document).on('change', function () {
                    var $this = $(this);

                    if ($this.val() == 'standard') {
                        $($this.data('editorPanel')).show();
                        $($this.data('productPanel')).hide();
                    } else {
                        $($this.data('widgetTypeSelector')).trigger('change');
                    }
                });
            }
        };
    })();

    ModuleTypeSelector.init('.ModuleTypeSelector')

    var base = '<?php echo $base; ?>';
    var ImageManager = (function () {
        return {
            init: function (selector, context) {
                var self = this;
                self.$el = $(selector, context || document);

                self.$el.bind('click', function (evt) {
                    evt.preventDefault();

                    self.showDialog($(this).data('field'), $(this).data('image'));
                });

                self.$el.each(function () {
                    var $this = $(this);

                    $($this.data('clear')).bind('click', function (evt) {
                        evt.preventDefault();

                        $('#' + $this.data('field')).val('');
                        $($this.data('image')).html('');
                    });
                });
            },
            showDialog: function (field, image) {
                $('#dialog').remove();

                $('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $token; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');

                var val1 = $('#' + field).val();

                $('#dialog').dialog({
                    title: 'Image Manager',
                    close: function (event, ui) {
                        var val2 = $('#' + field).val();

                        if (val1 != val2) {
                            $('#' + field).val('image/' + val2).trigger('change');

                            if (image !== undefined) {
                                $(image).html($('<img />', {src: '<?php echo $base; ?>image/' + val2}));
                            }
                        }
                    },
                    bgiframe: false,
                    width: 700,
                    height: 400,
                    resizable: false,
                    modal: false
                });
            }
        };
    })();

    ImageManager.init('.ImageManager');

    var ColorPicker = (function () {
        return {
            init: function (selector, context) {
                var CP = this;
                CP.$el = $(selector, context || document);

                CP.$el.each(function () {
                    var $cpElement = $(this);
                    $(this).ColorPicker({
                        color: CP.$el.data('defaultColor'),
                        onShow: function (colpkr) {
                            // recalculate position of the color picker
                            var pos = $(this).offset();

                            $(colpkr)
                                .css({
                                    left: pos.left + 20,
                                    top: pos.top + 20
                                })
                                .fadeIn(500);

                            return false;
                        },
                        onHide: function (colpkr) {
                            $(colpkr).fadeOut(500);
                            return false;
                        },
                        onChange: function (hsb, hex, rgb) {
                            $cpElement.find('div').css('backgroundColor', '#' + hex);
                            $($cpElement.data('backgroundColor')).val('#' + hex).trigger('change');
                        }
                    });
                });
            }
        };
    })();

    ColorPicker.init('.ColorPicker');

    var module_row = <?php echo $module_row; ?>;

    function addModule() {
        html  = '<div id="tab-module-' + module_row + '" class="vtabs-content">';

        html += '  <table class="form">';

        html += '    <tr>';
        html += '      <td><?php echo $entry_status; ?></td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_advanced_html_module[' + module_row + '][status]" value="0" />';
        html += '        <input type="checkbox" name="kuler_advanced_html_module[' + module_row + '][status]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '      <td><?php echo $entry_showtitle; ?></td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_advanced_html_module[' + module_row + '][showtitle]" value="0" />';
        html += '        <input type="checkbox" name="kuler_advanced_html_module[' + module_row + '][showtitle]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '        <td><?php echo $entry_title; ?></td>';
        html += '        <td>';
        html += '            <?php foreach ($languages as $language) { ?>';
        html += '                <p>';
        html += '                    <input type="text" name="kuler_advanced_html_module['+ module_row +'][title][<?php echo $language['language_id']; ?>]" />';
        html += '                    <img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" />';
        html += '                </p>';
        html += '            <?php } ?>';
        html += '        </td>';
        html += '    </tr>';

        html += '<tr>';
        html += '	<td><?php echo $__['entry_module_type']; ?></td>';
        html += '	<td>';
        html += '		<select name="kuler_advanced_html_module['+ module_row +'][module_type]" class="Selector" data-related-standard=".StandardRelatedRow_'+ module_row +'" data-related-widget=".WidgetRelatedRow_'+ module_row +'" style="width: 150px;">';
        html += '			<option value="standard"><?php echo $__['text_standard']; ?></option>';
        html += '			<option value="widget"><?php echo $__['text_widget']; ?></option>';
        html += '		</select>';
        html += '	</td>';
        html += '</tr>';

        html += '<tr class="WidgetRelatedRow_'+ module_row +'">';
        html += '	<td><?php echo $__['entry_widget_position']; ?></td>';
        html += '	<td>';
        html += '		<select name="kuler_advanced_html_module['+ module_row +'][widget_position]" style="width: 150px;">';
        html += '			<option value="left"><?php echo $__['text_left']; ?></option>';
        html += '			<option value="right"><?php echo $__['text_right']; ?></option>';
        html += '		</select>';
        html += '	</td>';
        html += '</tr>';

        html += '<tr class="WidgetRelatedRow_'+ module_row +'">';
        html += '	<td><?php echo $__['entry_widget_type']; ?></td>';
        html += '	<td>';
        html += '		<select name="kuler_advanced_html_module['+ module_row +'][widget_type]" class="Selector" data-related-html=".HtmlRelatedRow_'+ module_row +'" data-related-product=".ProductRelatedRow_'+ module_row +'" style="width: 150px;">';
        html += '			<option value="html"><?php echo $__['text_html']; ?></option>';
        html += '			<option value="product"><?php echo $__['text_product']; ?></option>';
        html += '		</select>';
        html += '	</td>';
        html += '</tr>';

        html += '<tr class="WidgetRelatedRow_'+ module_row +'">';
        html += '    <td><?php echo $__['entry_widget_icon']; ?></td>';
        html += '    <td>';
        html += '        <div id="WidgetIconContainer_'+ module_row +'" style="float: left; margin-right: 20px;">';
        html += '        </div>';
        html += '';
        html += '        <input type="hidden" id="WidgetIcon_'+ module_row +'" name="kuler_advanced_html_module['+ module_row +'][widget_icon]" />';
        html += '        <a href="#" class="ImageManager button" data-clear="#WidgetIconImageManagerClear_'+ module_row +'" data-field="WidgetIcon_'+ module_row +'" data-image="#WidgetIconContainer_'+ module_row +'"><?php echo $__['button_choose_image']; ?></a> &nbsp;';
        html += '        <a href="#" class="button" id="WidgetIconImageManagerClear_'+ module_row +'"><?php echo $__['button_clear']; ?></a>';
        html += '    </td>';
        html += '</tr>';

        html += '<tr class="WidgetRelatedRow_'+ module_row +'">';
        html += '    <td><?php echo $__['entry_widget_icon_color']; ?></td>';
        html += '    <td>';
        html += '        <div class="color-picker-container">';
        html += '            <div class="color-picker ColorPicker" data-background-color="#widget_icon_color_'+ module_row +'" data-default-color="">';
        html += '                <div></div>';
        html += '            </div>';
        html += '            <input type="text" id="widget_icon_color_'+ module_row +'" name="kuler_advanced_html_module['+ module_row +'][widget_icon_color]" size="7" />';
        html += '        </div>';
        html += '    </td>';
        html += '</tr>';

        html += '    <tr class="StandardRelatedRow_'+ module_row +'">';
        html += '      <td><?php echo $entry_layout; ?></td>';
        html += '      <td><select name="kuler_advanced_html_module[' + module_row + '][layout_id]" style="width: 150px;">';
        <?php foreach ($layouts as $layout) { ?>
        html += '           <option value="<?php echo $layout['layout_id']; ?>"><?php echo addslashes($layout['name']); ?></option>';
        <?php } ?>
        html += '      </select></td>';
        html += '    </tr>';

        html += '    <tr class="StandardRelatedRow_'+ module_row +'">';
        html += '      <td><?php echo $entry_position; ?></td>';
        html += '      <td><select name="kuler_advanced_html_module[' + module_row + '][position]" style="width: 150px;">';
        html += '        <option value="content_top"><?php echo $text_content_top; ?></option>';
        html += '        <option value="content_bottom"><?php echo $text_content_bottom; ?></option>';
        html += '        <option value="column_left"><?php echo $text_column_left; ?></option>';
        html += '        <option value="column_right"><?php echo $text_column_right; ?></option>';
        html += '      </select></td>';
        html += '    </tr>';

        html += '    <tr class="StandardRelatedRow_'+ module_row +'">';
        html += '      <td><?php echo $entry_sort_order; ?></td>';
        html += '      <td><input type="text" name="kuler_advanced_html_module[' + module_row + '][sort_order]" value="" size="3" /></td>';
        html += '    </tr>';
        html += '  </table>';

        html += '<div class="HtmlRelatedRow_'+ module_row +'">';
        html += '  <div id="language-' + module_row + '" class="htabs">';
        <?php foreach ($languages as $language) { ?>
        html += '    <a href="#tab-language-'+ module_row + '-<?php echo $language['language_id']; ?>"><img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /> <?php echo $language['name']; ?></a>';
        <?php } ?>
        html += '  </div>';

        <?php foreach ($languages as $language) { ?>
        html += '    <div id="tab-language-'+ module_row + '-<?php echo $language['language_id']; ?>">';
        html += '      <table class="form">';
        html += '        <tr>';
        html += '          <td><?php echo $entry_description; ?></td>';
        html += '          <td><textarea name="kuler_advanced_html_module[' + module_row + '][description][<?php echo $language['language_id']; ?>]" id="description-' + module_row + '-<?php echo $language['language_id']; ?>"></textarea></td>';
        html += '        </tr>';
        html += '      </table>';
        html += '    </div>';
        <?php } ?>

        html += '</div>';

        html += '<div class="ProductRelatedRow_'+ module_row +'">';
        html += '	<table class="form">';
        html += '		<tr>';
        html += '			<td><?php echo $__['entry_product']; ?></td>';
        html += '			<td><input type="text" class="ProductAutocomplete" data-module-row="'+ module_row +'" data-list="#ProductAutocompleteList_'+ module_row +'" data-products="#WidgetProducts_'+ module_row +'" /></td>';
        html += '		</tr>';
        html += '		<tr>';
        html += '			<td>&nbsp;</td>';
        html += '			<td>';
        html += '				<div id="ProductAutocompleteList_'+ module_row +'" class="scrollbox" data-item-prefix="ProductAutocompleteItem_'+ module_row +'_">';
        html += '				</div>';
        html += '				<input type="hidden" name="kuler_advanced_html_module['+ module_row +'][product]" id="WidgetProducts_'+ module_row +'" />';
        html += '			</td>';
        html += '		</tr>';

        html += '<tr>';
        html += '    <td><?php echo $__['entry_product_name']; ?></td>';
        html += '    <td width="10">';
        html += '        <div class="kuler-switch-btn">';
        html += '            <input type="hidden" name="kule_advanced_html_module['+ module_row +'][name]" value="0" />';
        html += '            <input type="checkbox" name="kuler_advanced_html_module['+ module_row +'][name]"<?php echo $default_module['name'] ? ' checked="checked"' : '' ?>  value="1">';
        html += '            <span class="kuler-switch-btn-holder"></span>';
        html += '        </div>';
        html += '    </td>';
        html += '</tr>';

        html += '<tr>';
        html += '    <td><?php echo $__['entry_product_price']; ?></td>';
        html += '    <td width="10">';
        html += '        <div class="kuler-switch-btn">';
        html += '            <input type="hidden" name="kule_advanced_html_module['+ module_row +'][price]" value="0" />';
        html += '            <input type="checkbox" name="kuler_advanced_html_module['+ module_row +'][price]"<?php echo $default_module['price'] ? ' checked="checked"' : '' ?>  value="1">';
        html += '            <span class="kuler-switch-btn-holder"></span>';
        html += '        </div>';
        html += '    </td>';
        html += '</tr>';

        html += '<tr>';
        html += '    <td><?php echo $__['entry_product_rating']; ?></td>';
        html += '    <td width="10">';
        html += '        <div class="kuler-switch-btn">';
        html += '            <input type="hidden" name="kule_advanced_html_module['+ module_row +'][rating]" value="0" />';
        html += '            <input type="checkbox" name="kuler_advanced_html_module['+ module_row +'][rating]"<?php echo $default_module['rating'] ? ' checked="checked"' : '' ?>  value="1">';
        html += '            <span class="kuler-switch-btn-holder"></span>';
        html += '        </div>';
        html += '    </td>';
        html += '</tr>';

        html += '<tr>';
        html += '    <td><?php echo $__['entry_product_description']; ?></td>';
        html += '    <td width="10">';
        html += '        <div class="kuler-switch-btn">';
        html += '            <input type="hidden" name="kule_advanced_html_module['+ module_row +'][product_description]" value="0" />';
        html += '            <input type="checkbox" name="kuler_advanced_html_module['+ module_row +'][product_description]"<?php echo $default_module['product_description'] ? ' checked="checked"' : '' ?>  value="1">';
        html += '            <span class="kuler-switch-btn-holder"></span>';
        html += '        </div>';
        html += '    </td>';
        html += '</tr>';

        html += '<tr>';
        html += '    <td><?php echo $__['entry_product_add_to_cart']; ?></td>';
        html += '    <td width="10">';
        html += '        <div class="kuler-switch-btn">';
        html += '            <input type="hidden" name="kule_advanced_html_module['+ module_row +'][add]" value="0" />';
        html += '            <input type="checkbox" name="kuler_advanced_html_module['+ module_row +'][add]"<?php echo $default_module['add'] ? ' checked="checked"' : '' ?>  value="1">';
        html += '            <span class="kuler-switch-btn-holder"></span>';
        html += '        </div>';
        html += '    </td>';
        html += '</tr>';

        html += '<tr>';
        html += '    <td><?php echo $__['entry_product_wish_list']; ?></td>';
        html += '    <td width="10">';
        html += '        <div class="kuler-switch-btn">';
        html += '            <input type="hidden" name="kule_advanced_html_module['+ module_row +'][wishlist]" value="0" />';
        html += '            <input type="checkbox" name="kuler_advanced_html_module['+ module_row +'][wishlist]"<?php echo $default_module['wishlist'] ? ' checked="checked"' : '' ?>  value="1">';
        html += '            <span class="kuler-switch-btn-holder"></span>';
        html += '        </div>';
        html += '    </td>';
        html += '</tr>';

        html += '<tr>';
        html += '    <td><?php echo $__['entry_product_compare']; ?></td>';
        html += '    <td width="10">';
        html += '        <div class="kuler-switch-btn">';
        html += '            <input type="hidden" name="kule_advanced_html_module['+ module_row +'][compare]" value="0" />';
        html += '            <input type="checkbox" name="kuler_advanced_html_module['+ module_row +'][compare]"<?php echo $default_module['compare'] ? ' checked="checked"' : '' ?>  value="1">';
        html += '            <span class="kuler-switch-btn-holder"></span>';
        html += '        </div>';
        html += '    </td>';
        html += '</tr>';

        html += '<tr>';
        html += '    <td><?php echo $__['entry_product_dimension']; ?></td>';
        html += '    <td><input type="text" name="kuler_advanced_html_module['+ module_row +'][image_width]" value="<?php echo $default_module['image_width']; ?>" size="5" placeholder="width" />';
        html += '        <input type="text" name="kuler_advanced_html_module['+ module_row +'][image_height]" value="<?php echo $default_module['image_height']; ?>" size="5" placeholder="height" />';
        html += '     </td>';
        html += '</tr>';

        html += '<tr>';
        html += '    <td><?php echo $__['entry_description_text']; ?>';
        html += '    </td>';
        html += '    <td>';
        html += '        <input type="text" name="kuler_advanced_html_module['+ module_row +'][description_text]" size="5" value="<?php echo $default_module['description_text']; ?>" />';
        html += '    </td>';
        html += '</tr>';

        html += '	</table>';
        html += '</div>';

        html += '</div>';

        $('#form').append(html);

        <?php foreach ($languages as $language) { ?>
        CKEDITOR.replace('description-' + module_row + '-<?php echo $language['language_id']; ?>', {
            filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserImageBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserFlashBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserImageUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
            filebrowserFlashUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>'
        });
        <?php } ?>

        $('#language-' + module_row + ' a').click(function() {
            $('#htab').val($(this).attr('href'));
        }).tabs();

        $('#module-add').before('<a href="#tab-module-' + module_row + '" id="module-' + module_row + '"><?php echo $tab_module; ?> ' + module_row + '&nbsp;<img src="view/kulercore/images/icons/icon-delete.png" alt="" onclick="$(\'.vtabs a:first\').trigger(\'click\'); $(\'#module-' + module_row + '\').remove(); $(\'#tab-module-' + module_row + '\').remove(); return false;" /></a>');

        $('.vtabs a').click(function() {
            $('#vtab').val($(this).attr('href'));
        }).tabs();

        $('.Selector').trigger('change');

        $('#module-' + module_row).trigger('click');

        module_row++;

        var $module = $('#tab-module-' + module_row);

        ImageManager.init('.ImageManager', $module[0]);
        ColorPicker.init('.ColorPicker', $module[0]);
        ProductAutocomplete.init('.ProductAutocomplete', $module[0]);
    }
    //--></script>
    <script type="text/javascript"><!--
        $('.vtabs a').click(function() {
            $('#vtab').val($(this).attr('href'));
        }).tabs();
        //--></script>
    <script type="text/javascript"><!--
        <?php $module_row = 1; ?>
        <?php foreach ($modules as $module) { ?>
        $('#language-<?php echo $module_row; ?> a').click(function() {
            $('#htab').val($(this).attr('href'));
        }).tabs();
        <?php $module_row++; ?>
        <?php } ?>

        <?php if ($vtab) { ?>
        $('.vtabs a[href="<?php echo $vtab ?>"]').click();
        <?php } ?>

        <?php if ($htab) { ?>
        $('.htabs a[href="<?php echo $htab ?>"]').click();
        <?php } ?>

        /* Kuler Site Builder */
        <?php if (isset($ksb_trigger_creation) && $ksb_trigger_creation) { ?>
        (function () {
            $('.add-element').trigger('click');
        })();
        <?php } ?>
        //--></script>
<?php echo $footer; ?>